<template>
    <div>
        <div class="w">
            <t-header></t-header>

            <div class="mv-sheet">
                <span>MV</span>
                <a
                :key="index"
                @click="showMvCat(item.name)"
                :class="item.name == params.area ? 'current-style' : ''"
                v-for="(item, index) in mvCatList"
                >{{item.name}}</a>
            </div>
            <mv-list :mvInfo="mvInfo"></mv-list>

            <div class="page">
                <a @click="showMVL" href="javascript:;">上一页</a>
                <a @click="showMVR" href="javascript:;">下一页</a>
            </div>
        </div>


        <t-footer></t-footer>
    </div>
</template>

<script>
import Header from '../components/Header'
import Footer from '../components/Footer'
import MvList from '../components/MvList'
export default {
    components: {
        't-header': Header,
        't-footer': Footer,
        'mv-list': MvList
    },
    data() {
        return {
            // MV参数
            params: {
                area: '全部',
                order: '最热',
                limit: 32,
                offset: 0
            },
            // MV分类
            mvCatList: [
                { name: '全部' },
                { name: '内地' },
                { name: '港台' },
                { name: '欧美' },
                { name: '日本' },
                { name: '韩国' },
            ],
            // 分类信息
            mvInfo: []
        }
    },
    mounted() {
        this.getMvList();
    },
    methods: {
        // 获取MV
        async getMvList() {
            let { data: res } = await this.$http.get('/mv/all', { params: { ...this.params } });
            this.mvInfo = res.data;
        },
        // 切换分类
        showMvCat(name) {
            this.params.area = name;
            this.getMvList();
        },
        // 上一页
        showMVL() {
            if (this.params.offset != 0) {
                this.params.offset = this.params.offset - 32;
                this.getMvList();
                window.scrollTo(0, 0);
            } else {
                this.$message.info('已经在第一页了');
            }
        },
        // 下一页
        showMVR() {
            if (this.mvInfo.length != 0) {
                this.params.offset = this.params.offset + 32;
                this.getMvList();
                window.scrollTo(0, 0);
            }
        }
    }
}
</script>

<style lang="less" scoped>
.w {
    padding: 0 50px;
}
.mv-sheet {
    margin-top: 50px;
    span {
        font-size: 26px;
        color: #4a4a4a;
        margin-right: 30px;
    }
    a {
        color: #964a4a;
        display: inline-block;
        margin: 0 20px;
        cursor: pointer;
    }
    .current-style {
        border-bottom: 2px solid #4a4a4a;
    }
}

.page {
    padding: 50px 0;
    text-align: center;
    a {
        display: inline-block;
        padding: 0 66px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border: 1px solid #ccc;
        color: #4a4a4a;
        font-weight: 700;
        margin: 0 40px;
        transition: all .6s;
        &:hover {
            background-color: #409EFF;
            color: #fff;
        }
    }
}
</style>